<template>
    <tm-modal :height="800" :btnRound="6" ref="modal" color="white" okColor="#A37C3D" cancelColor="#A37C3D"
        okLinear="left" splitBtn title="请选择反馈问题的类型">
        <view>
            <tm-text color="grey" :font-size="24" label="谢谢你的反馈，我们会继续优化进步"></tm-text>
        </view>
        <template v-if="resetComponent">
            <view :style="{ marginLeft: '-10rpx' }" class="flex-row flex flex-wrap mt-20">
                <tm-tag v-for="(item, index) in tagList" :key="index" checkable color="#A37C3D" size="s" :label="item"
                    @update:checked="handleTagChange($event, item)"></tm-tag>
            </view>
            <view class="mt-20">
                <tm-input v-model="content" :fontSize="24" :height="300" :inputPadding="[12]" placeholder="写下更详细的情况"
                    showCharNumber :maxlength="100" :border="1" color="grey-5" type="textarea"></tm-input>
            </view>
        </template>
    </tm-modal>
</template>
<script setup lang="ts">
    import { ref, nextTick, onMounted, onUnmounted } from 'vue';
    import { useUserStore } from "@/stores/user";

    const tagList = ['有害/不安全', '虚假信息', '没有帮助', '其他']

    const modal = ref(null)
    const contentList = ref([])
    const content = ref('')
    const resetComponent = ref(true)
    const userStore = useUserStore();

    const reset = async () => {
        resetComponent.value = false
        await nextTick()
        resetComponent.value = true
        content.value = ''
        contentList.value = []
    }

    const handleTagChange = (val: boolean, item: string) => {
        if (val) {
            contentList.value.push(item)
        } else {
            contentList.value = contentList.value.filter((i: string) => i !== item)
        }
    }

    const handleUserReport = () => {
        modal.value?.open()?.then(async () => {
            await userStore.userReport({
                reportContent: content.value.length > 0 ? content.value : contentList.value.join('、'),
                type: 1
            })
            reset()
        }).catch(() => {
            reset()
        })
    }

    defineExpose({ handleUserReport })
</script>
<style lang="less" scoped></style>